import React from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import { useAdminAuth } from '../../contexts/AdminAuthContext';

const HeaderWrapper = styled.header`
  height: 64px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  width: 100%; /* 在MainContent内部占满宽度 */
  overflow: hidden;
  position: relative;
`;

const LeftSection = styled.div`
  display: flex;
  align-items: center;
`;

const ToggleButton = styled.button`
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #374151;
  margin-right: 16px;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
  
  &:hover {
    background-color: #f3f4f6;
  }
`;

const PageTitle = styled.h1`
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin: 0;
`;

const RightSection = styled.div`
  display: flex;
  align-items: center;
  flex-shrink: 0; /* 确保右侧内容不会被压缩 */
`;

const UserInfo = styled.div`
  display: flex;
  align-items: center;
  margin-right: 12px;
  white-space: nowrap;
`;

const UserAvatar = styled.div`
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 500;
  margin-right: 8px;
`;

const UserName = styled.span`
  font-size: 14px;
  color: #374151;
  font-weight: 500;
`;

const LogoutButton = styled.button`
  background-color: #ef4444;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:hover {
    background-color: #dc2626;
  }
  
  &:active {
    transform: translateY(1px);
  }
`;

const AdminHeader = ({ toggleSidebar, sidebarCollapsed }) => {
  const { currentUser, logout } = useAdminAuth();
  const navigate = useNavigate();

  // 获取当前页面标题
  const getCurrentPageTitle = () => {
    const pathname = window.location.pathname;
    
    // 根据当前路由返回对应的页面标题
    const titleMap = {
      '/admin/dashboard': '数据监控大屏',
      '/admin/users': '用户管理',
      '/admin/content/face': '面相分析配置',
      '/admin/content/palm': '手相分析配置',
      '/admin/content/bazi': '八字命理库',
      '/admin/content/tarot': '塔罗牌面管理',
      '/admin/content/dream': '解梦关键词',
      '/admin/app-versions': 'APP版本管理',
      '/admin/settings': '系统设置'
    };
    
    // 查找最匹配的路径
    for (const [path, title] of Object.entries(titleMap)) {
      if (pathname.startsWith(path)) {
        return title;
      }
    }
    
    return '管理后台';
  };

  // 处理退出登录
  const handleLogout = async () => {
    try {
      await logout();
      navigate('/admin/login');
    } catch (error) {
      console.error('退出登录失败:', error);
    }
  };

  // 获取用户头像首字母
  const getUserInitial = () => {
    if (currentUser && currentUser.username) {
      return currentUser.username.charAt(0).toUpperCase();
    }
    return 'A';
  };

  return (
    <HeaderWrapper>
      <LeftSection>
        <ToggleButton onClick={toggleSidebar} title={sidebarCollapsed ? '展开菜单' : '收起菜单'}>
          {sidebarCollapsed ? '☰' : '☰'}
        </ToggleButton>
        <PageTitle>{getCurrentPageTitle()}</PageTitle>
      </LeftSection>
      
      <RightSection>
        <UserInfo>
          <UserAvatar>
            {getUserInitial()}
          </UserAvatar>
          <UserName>
            {currentUser?.username || '管理员'}
          </UserName>
        </UserInfo>
        <LogoutButton onClick={handleLogout}>
          退出登录
        </LogoutButton>
      </RightSection>
    </HeaderWrapper>
  );
};

export default AdminHeader;